<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>书籍详细资料</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{vendors/magnific/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{vendors/bootstrap-select/css/bootstrap-select.min.css}">

    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" th:href="@{tag_tree/tagTree.css}" />
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">

</head>
<body>

<div id="page" class="site row">

    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1" style="background: #36424d;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li><a th:href="@{/}">主页</a></li>
                        <li><a th:href="@{login}" th:if="${session.user == null}"><i class="fa fa-sign-in"></i> 登录 </a>
                        </li>
                        <li><a th:href="@{register}" th:if="${session.user == null}"><i class="fa fa-user"></i> 注册 </a>
                        </li>
                        <li><a th:href="@{personal_center}" th:if="${session.user != null}" class="mark-img"
                               data-spm-anchor-id="5176.12281949.0.0">
                            <img class="userPhoto" style="width: 22px; height: 22px; vertical-align: middle; margin-right: 10px;
                                        border-radius: 15px;" src="https://ucc.alicdn.com/avatar/avatar3.jpg">
                            <span th:text="${session.user.getName()}"></span>
                        </a>
                        </li>
                        <li><a th:href="@{login}" th:if="${session.user != null}">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </header>

    <main id="contents" class="site-contnts">
        <div class="float_tree">
            <h4>知识框架</h4>
            <div id="know_tree">

            </div>
        </div>
        <!--Blogs-->
        <section class="row blog-section" style="padding-top: 170px">
            <div class="container" style="padding-left: 120px;">
                <div class="row">
                    <div class="col-md-8">
                        <article class="row loop-post single-post">
                            <div class="row">
                                <div class="col-md-6">
                                    <h2 class="ptitle" th:text="${book.getName()}"></h2>
                                    <ul class="post-meta list-unstyled nav-pills">
                                        <li><a href="#" th:text="${book.getAuthor()}"><i class="fa fa-user"></i></a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-6">
                                    <img th:src="${book.getImg()}" th:alt="${book.getName()}" class="img-responsive" style="display: inline;
    height: 285px;width: 210px;">
                                </div>
                            </div>
                            <hr/>
                            <div class="entry-content row">
                                <h4>内容简介</h4>
                                <br>
                                <p style="text-indent: 2em;" th:text="${book.getBookIntro()}"></p>
                                <br>
                                <br>
                                <h4>作者简介</h4>
                                <br>
                                <blockquote>
                                    <h2 class="commenter-name" th:text="${book.getAuthor()}"></h2>
                                    <q style="text-indent: 2em;" th:text="${book.getAuthorIntro()} != ''? ${book.getAuthorIntro()}:'暂无介绍'"></q>
                                </blockquote>
                            </div>
                        </article>
                        <div class="row related-posts">
                            <h2 class="hp-h1">资料来源</h2>
                            <div class="related-post pull-left">
                                <a href="#"><h2 class="rp-title">豆瓣</h2></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 sidebar pricing-plan primary">
                        <div class="pp-inner row" style="padding-top: initial;adding-bottom: 20px;">
                            <div class="media hst-plan-price">
                                <div class="media-body">
                                    <sup style="color: white">豆瓣评分</sup><span class="price">[[${book.getScore()}]]分<sub
                                        th:text="${book.getScorenum()}+人参与评分"></sub></span>
                                </div>
                                <div class="media-right">
                                    <a class="btn btn-default bookOperate" th:if="${session.user != null and !isSave}"
                                       id="addMybook">收藏此书</a>
                                    <a class="btn btn-default bookOperate" th:if="${session.user != null and isSave}"
                                       id="delMyBook">取消收藏</a>
                                </div>
                            </div>
                        </div>
                        <aside class="row widget widget_categories" style="margin-top: 20px;">
                            <ul>
                                <li class="cat-item" th:each="info:${bookInfo.keySet()}">
                                    <a style='width: auto;'>
                                        <i class="fa fa-bolt"
                                           style='margin-right: 15px;color: #727bd8;font-size: 14px;'></i>
                                        [[${info}]]
                                    </a>
                                    [[${bookInfo.getString(info)}]]
                                </li>
                            </ul>
                        </aside>
                        <aside class="row widget widget_tag_cloud">
                            <h4 class="widget-title">标签</h4>
                            <div class="tagcloud" id="tags">
                                <span class="tag-link-1" th:each="tag:${tags}" th:text="${tag}"
                                      style='margin-right: 5px'></span>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: #939393">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank"
                                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992"
                                       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
                                            鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

</div>
<div class="modal fade" id="overflow" th:if="${session.user!=null}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 class="modal-title" align="center">温馨提示</h4>
                <br/>
                <div class="row" align="center">
                    <span>您收藏的书籍已经达到20本了，先去看看他们吧。</span>
                </div>
                <br/>
            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>
<script th:src="@{vendors/waypoint/waypoints.min.js}"></script>
<script th:src="@{vendors/couterup/jquery.counterup.min.js}"></script>
<script th:src="@{vendors/bootstrap-select/js/bootstrap-select.min.js}"></script>
<script th:src="@{tag_tree/tagTree.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>

<script th:inline="javascript" th:if="${session.user!=null}">
    $(function () {
        $(".bookOperate").click(function () {
            $.ajax({
                url: "func/" + $(this).attr("id"),
                type: "get",
                data: {"bookid": [[${book.getId()}]]},
                success: function (data) {
                    data = JSON.parse(data);
                    if (data.message === 200) {
                        location.reload();
                    } else {
                        $('#overflow').modal('show'); //显示模态框
                    }
                },
                error: function (data) {
                    console.log("收藏失败");
                }
            })
        })
    });
</script>

<script th:inline="javascript">
    $(function(){
        var knows = [[${knows}]];
        var islogin = [[${session.user != null}]];
        // console.log(islogin);

        var children = [];
        $.each( knows, function (i,know) {
            children.push({
                name:know,
                value:know,
                children:[]
            });
        });

        var data =[
            {
                name:"全部知识点",
                value:"1",
                children:children,
            }
        ];

        $("#know_tree").tagTree({
            id:"",
            data:data,
            fold:false,
            multiple:true,
            check:function(val){
                // console.log('chekc:'+val);
                // console.log($(this).tagTreeValues());
            },
            done:function(){
                // console.log('tagTree is ok!');
            }
        });
    });
</script>

</body>
</html>